Understanding Run-In Elements
Description
The run-in value creates a box whose type depends on the surrounding elements.
There are three situations that the browser must evaluate to determine the nature of a run-in box.
- If a run-in element contains an element whose display value is block, then the run-in element becomes a block-level element.
- Then, if the next sibling element to a run-in element is a block element, then the run-in element becomes the first inline-level element in the sibling.
- Or, the run-in element is treated as a block-level element.
Example
The following code shows a run-in element whose sibling is a block-level element.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {<!-- w w w .j a va 2 s. c om-->
display: block;
}
span {
display: run-in;
border: medium double black;
}
</style>
</head>
<body>
<span> This is a test. </span>
<p>This is a test.</p>
</body>
</html>
Example 2
If the sibling element isn't a block-level element, then the run-in is treated as a block.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {<!--from w w w . j a v a2 s . c om-->
display: inline;
}
span {
display: run-in;
border: medium double black;
}
</style>
</head>
<body>
<span> This is a test. </span>
<p>This is a test.</p>
</body>
</html>